import { useRoutes } from "react-router";
import { FC, lazy, Suspense } from "react";
import Loading from "@/components/Loading";
import CommonLayOut from "@/layouts/CommonLayOut";
import { Navigate } from "react-router-dom";

const Home = lazy(() => import("@/pages/Home"))
const Blog = lazy(() => import("@/pages/Blog"))
const NotFound = lazy(() => import("@/pages/NotFound"))
const AboutMe = lazy(() => import("@/pages/AboutMe"))
const CurrentArticle = lazy(() => import("@/pages/CurrentArticle"))
const ArchiveRecord = lazy(() => import("@/pages/ArchiveRecord"))


const withLoading = (Component: FC) => {
    return (
        <Suspense fallback={<Loading />}>
            <Component />
        </Suspense>
    )
}

const routes = [
    {
        path: "/",
        element: <CommonLayOut />,
        children: [
            {
                path: "/",
                isShow: true,
                meta: {
                    title: "首页",
                },
                element: withLoading(Home)
            },
            {
                path: "/blog",
                isShow: true,
                meta: {
                    title: "博客"
                },
                element: withLoading(Blog)
            },
            // 配置blog 界面的动态路由
            {
                path: "/blog/:category",
                isShow: false,
                element: withLoading(Blog)
            },
            {
                path: "/blog/:category/:tag",
                isShow: false,
                element: withLoading(Blog)
            },
            {
                path: "/archiveRecord",
                isShow: true,
                meta: {
                    title: "档案"
                },
                element: withLoading(ArchiveRecord)
            },
            {
                path: "/aboutMe",
                isShow: true,
                meta: {
                    title: "关于"
                },
                element: withLoading(AboutMe)
            },
            {
                path: "currentArticle/:id",
                isShow: false,
                element: withLoading(CurrentArticle)
            },
            {
                path: "/",
                isShow: false,
                redirect: "/home",
                element: withLoading(Home)
            }
        ]
    },
    {
        path: '/404',
        element: withLoading(NotFound)
    },
    {
        path: '*',
        element: <Navigate to="/404" />
    }
]

// 自定义 hook 用于获取路由
export const useAppRoutes = () => {
    return useRoutes(routes);
};
export default routes;